<template>
  <j-modal
    :title="title"
    :width="1000"
    switchFullscreen
    :fullscreen="true"
    :visible="visible"
    :draggable="true"  
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <template>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="8" :lg="6" :md="8"  :sm="24">
              <a-form-item label="日期">
                <a-range-picker
                  style="width: 210px"
                  v-model="queryParam.createTimeRange"
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onDateChange" 
                />
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="6" :md="8" :sm="24">
              <a-form-item label="槽号">
                <a-input placeholder="请输入槽号" v-model="queryParam.slotNo"></a-input>
              </a-form-item>
            </a-col>
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :md="6" :sm="24">
                <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset1" icon="reload" style="margin-left: 8px; left: 10px"
                  >重置</a-button
                >
              </a-col>
            </span>
          </a-row>
        </a-form>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        :columns="columns"
        :dataSource="tbList"
        :pagination="ipagination"
        @change="handleTableChange"
        class="j-table-force-nowrap"
      >
      </a-table>
    </template>
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
  </j-modal>
</template> 

<script>
import moment from 'moment'
import { deleteAction, getAction, postAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
 
export default {
  name: 'UserReportsHistoryModal', 
  components: {},
  data() {
    return {
      title: '历史数据',
      width: 800,
      visible: false,
      selectionRow: {},
      model: {
        reportId: '',
        calcDate: '', //计算时间
      },
      selectDate: '', // =计算时间 格式 （yyyy-MM-dd）
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      tbList: [], //
      confirmLoading: false,
      loading: false,
      columns: [],
      queryParam: {
        createTimeRange: [],
        slotNo:''
      },
      url: {
        exportXlsUrl: '/userReports/userReports/exportXls2',
        queryById: '/userReports/userReports/queryById',
      },
    }
  },
  methods: {
    show(selectionRow) {
      this.selectionRow = selectionRow;
      this.visible = true
      this.title = '报告 - 【 ' + selectionRow.reportName + ' 】 '
      this.tbList = [];
      this.searchReset1();
    },
    searchQuery() {
      this.loadData(1)
    },
    searchReset1() {
      this.queryParam.slotNo ='';
      this.initDate()
      this.loadData(1)
    },
    initDate() {
      let date = new Date()
      var year = new Date().getFullYear()
      var month = new Date().getMonth()
      let date2 = new Date(year, month, 1)
      this.date2 = moment(date2).format('YYYY-MM-DD')
      this.date = moment(date).format('YYYY-MM-DD')
      this.queryParam.createTimeRange = [moment(this.date2), moment(this.date)]
      this.queryParam.createTime_begin = this.date2
      this.queryParam.createTime_end = this.date
    },

    close() {
      this.visible = false
    },
    loadData(arg) {
      var that = this
      that.confirmLoading = true 
       if (arg === 1) {
        this.ipagination.current = 1
      }
      let sqp = {}
      var param = Object.assign(sqp, this.queryParam)
      param['id']=this.selectionRow.id
      param.pageNo = that.ipagination.current;
      param.pageSize = that.ipagination.pageSize;  
      getAction(`/userReports/userReports/hisotryPageList?slotNo=${param.slotNo}`, param).then((res) => {
        this.confirmLoading = false
        if (res.success) { 
          var data = res.result
          var fileNames = data.records[0].userReportsFieldList //列名用 自定义列 （序号排序） 
          that.columns = [
            {
              title: '槽号',
              align: 'center',
              dataIndex: 'slot'
            },
             {
              title: '日期',
              align: 'center',
              dataIndex: 'calc_date'
            },
          ]
          that.tbList = []
          for (let i = 0; i < fileNames.length; i++) {
            const element = fileNames[i]
            that.columns.push({
              title: element.fieldName,
              dataIndex:  element.tableColumn,
              align: 'center',
            })
          }
          that.tbList = data.records.slice(1);  
          that.ipagination.total = res.result.total 
        } else {
          that.$message.error(res.message)
        }
      })
    },
    handleCancel() {
      this.close()
    }, 
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      // console.log(pagination)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },
    onDateChange: function (value, dateString) {
      console.log(dateString[0], dateString[1])
      this.queryParam.createTime_begin = dateString[0]
      this.queryParam.createTime_end = dateString[1]
    },
  },
}
</script>

<style scoped>
</style>